<%--
  Created by IntelliJ IDEA.
  User: wujinqian
  Date: 2021/5/16
  Time: 15:01
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <title>消费记录</title>
    <script type="text/javascript" src="${pageContext.request.contextPath}/statics/calendar/WdatePicker.js"></script>
</head>
<script type="text/javascript" src="${pageContext.request.contextPath}/statics/js/jquery-1.12.4.js"></script>
<script type="text/javascript">
    $(function () {
        $("#three table tr:even").css("background-color","gray");
    });
    function deleteUHistory(dom,userId) {
        if(confirm("确定要删除此记录吗？")){
            $.post("${pageContext.request.contextPath}/deleteUHistory",{userId:userId},function (result) {
             if(result){
                 alert(result);
                 $(dom).parent().parent().remove();
                 alert("删除成功！");
             }else{
                 alert("网络异常！");
             }
            },"JSON");
        }

    }
</script>
<style type="text/css">
    *{
        margin: 0px;
        padding: 0px;
    }
    #father{
        position: relative;
    }
    #one{
        position: absolute;
        top:50px;
        left:700px;
        font-size: 30px;
        font-weight: bold;
    }
    #two{
        position: absolute;
        top:150px;
        left:670px;
        font-size: 30px;
    }
    #two input{
        height: 30px;
    }
    #three{
        position: absolute;
        top:230px;
        left:300px;
        font-size: 20px;
    }
    #three table tr{
        line-height: 30px;
        height: 30px;
        font-size: 20px;
    }

</style>
<body>
<div id="father">
    <div id="one">
        <h1>消&nbsp;&nbsp;&nbsp;&nbsp;费&nbsp;&nbsp;&nbsp;&nbsp;记&nbsp;&nbsp;&nbsp;&nbsp;录</h1>
    </div>
    <form action="${pageContext.request.contextPath}/selectUHistory" method="post">
        <div id="two">请输入查找日期：<input CLASS="Wdate" name="firstDate" id="time"  onclick="WdatePicker();">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="submit" id="btn" value="查询" id="input2" style="width: 60px;height: 30px;font-size: 20px"></div>
    </form>
<div id="three">
    <table cellpadding="0" cellspacing="0" border="1" align="center" width="1300px">
        <tr>
            <th>房间号</th>
            <th>房间类型</th>
            <th>开始时间</th>
            <th>结束时间</th>
            <th>消费金额</th>
            <th>评价</th>
            <th>操作</th>
        </tr>
        <tbody id="tbody">
        <c:forEach items="${uHistoryList}" var="li">
            <tr>
                <td style="text-align: center">${li.room.roomNo}</td>
                <td style="text-align: center">${li.roomName}</td>
                <td style="text-align: center"><fmt:formatDate value="${li.firstDate}" pattern="yyyy-MM-dd"></fmt:formatDate></td>
                <td style="text-align: center"><fmt:formatDate value="${li.lastDate}" pattern="yyyy-MM-dd"></fmt:formatDate></td>
                <td style="text-align: center">${li.allMoney}</td>
                <td style="text-align: center">${li.despertion}</td>
                <td style="text-align: center"><a href="javaScript:void(0);" onclick="deleteUHistory(this,${li.userId});">删除</a></td>
            </tr>
        </c:forEach>
        </tbody>
    </table>
</div>
</div>
</body>
</html>
